<!DOCTYPE html>
<html lang="zh">

	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<meta http-equiv="X-UA-Compatible" content="ie=edge" />
		<title>all api demo</title>

		<script src="../../js/lib/jquery-v3.0.0/jquery.js" type="text/javascript" charset="utf-8"></script>
	</head>

	<body>
		<h1>jquery.callbacks对象所有的api演示</h1>
		<script type="text/javascript">
			const Logger = () => {
				var i = 1;
				var $content = $('<div class="content"></div>');
				$('body').append($content);
				return {
					addLog: function(msg, color) {
						if(!color) color = 'black';
						$content.append('<p style="color:' + color + ';">' + i + ' : ' + msg + '</p>');
						i += 1;
					}
				}
			}
			const addLog = Logger().addLog;

			function fn1(value) {
				addLog("fn1 says: " + value, 'green');
			}

			function fn2(value) {
				addLog("fn2 says: " + value, 'blue');
				return false;
			}

			function fn3(value) {
				addLog("fn3 says: " + value, 'red');
				return true;
			}

			const exam1 = () => {
				//test  callbacks.add
				//test  callbacks.fire
				var callbacks = $.Callbacks();
				var prefix = "exam1:";
				callbacks.add(fn1);
				callbacks.fire(prefix + 'fn1');
				callbacks.add(fn2);
				callbacks.fire(prefix + 'fn1 fn2');
				callbacks.add(fn3);
				callbacks.fire(prefix + 'fn1 fn2 fn3');
			}
			const exam2 = () => {
				//test  callbacks.remove
				var callbacks = $.Callbacks();
				var prefix = "exam2:";
				callbacks.add(fn1);
				callbacks.add(fn2);
				callbacks.add(fn3);
				callbacks.remove(fn1);
				callbacks.remove(fn2);
				callbacks.remove(fn3);
				callbacks.fire(prefix + 'fn1 fn2 fn3');
				addLog(prefix + 'noting happen');
			}
			const exam3 = () => {
				//test$.Callbacks( "once" )
				//once: 确保这个回调列表只执行（ .fire() ）一次(像一个递延 Deferred).
				var callbacks = $.Callbacks("once");
				var prefix = "exam3:";
				callbacks.add(fn1);
				callbacks.fire(prefix + 'fn1');
				callbacks.fire(prefix + 'fn1');
			}
			const exam4 = () => {
				//test$.Callbacks( "memory" )
				//memory: 保持以前的值，将添加到这个列表的后面的最新的值立即执行调用任何回调 (像一个递延 Deferred).
				var callbacks = $.Callbacks("memory");
				var prefix = "exam4:";
				callbacks.add(fn1);
				callbacks.fire(prefix + 'aaa');
				callbacks.fire(prefix + 'bbb');
				callbacks.add(fn2);
				callbacks.add(fn3);
			}
			const exam5 = () => {
				//test$.Callbacks( "unique" )
				//unique: 确保一次只能添加一个回调(所以在列表中没有重复的回调).
				var callbacks = $.Callbacks("unique");
				var prefix = "exam5:";
				callbacks.add(fn1);
				callbacks.add(fn1);
				callbacks.add(fn1);
				callbacks.fire(prefix + 'aaa');
				callbacks.fire(prefix + 'bbb');

			}
			const exam6 = () => {
				//test$.Callbacks( "stopOnFalse" )
				//stopOnFalse: 当一个回调返回false 时中断调用
				var callbacks = $.Callbacks("stopOnFalse");
				var prefix = "exam6:";
				callbacks.add(fn1);
				callbacks.add(fn2);
				callbacks.add(fn3);
				callbacks.fire(prefix + 'aaa');

			}
			const exam7 = () => {
				//test$.Callbacks( "unique memory" )
				var callbacks = $.Callbacks("unique memory");
				var prefix = "exam7:";
				callbacks.add(fn1);
				callbacks.add(fn1);
				callbacks.fire(prefix + 'aaa');
				callbacks.add(fn2);
				callbacks.add(fn2);
				callbacks.add(fn3);
				callbacks.add(fn3);
			}
			const exam8 = () => {
				//使用callbacks形成发布/订阅模式
				var callbacks = $.Callbacks();
				var prefix = "exam8:";

				var topics = {};
				jQuery.Topic = function(id) {
					var callbacks,
						method,
						topic = id && topics[id];

					if(!topic) {
						callbacks = jQuery.Callbacks();
						topic = {
							publish: callbacks.fire,
							subscribe: callbacks.add,
							unsubscribe: callbacks.remove
						};
						if(id) {
							topics[id] = topic;
						}
					}
					return topic;
				};
				// Subscribers
				$.Topic("mailArrived").subscribe(fn1);
				$.Topic("mailArrived").subscribe(fn2);
				$.Topic("mailSent").subscribe(fn1);

				// Publisher
				$.Topic("mailArrived").publish("hello world!");
				$.Topic("mailSent").publish("woo! mail!");

				// Here, "hello world!" gets pushed to fn1 and fn2
				// when the "mailArrived" notification is published
				// with "woo! mail!" also being pushed to fn1 when
				// the "mailSent" notification is published.
			}
			const exam9 = () => {
				//使用callbacks形成发布/订阅模式
				var callbacks = $.Callbacks();
				var prefix = "exam9:";

				var topics = {};
				jQuery.Topic = function(id) {
					var callbacks,
						method,
						topic = id && topics[id];

					if(!topic) {
						callbacks = jQuery.Callbacks();
						topic = {
							publish: callbacks.fire,
							subscribe: callbacks.add,
							unsubscribe: callbacks.remove
						};
						if(id) {
							topics[id] = topic;
						}
					}
					return topic;
				};
				
				// subscribe to the mailArrived notification
				$.Topic("mailArrived").subscribe(fn1);
				$.Topic("mailArrived").subscribe(fn2);

				// create a new instance of Deferreds
				var dfd = $.Deferred();

				// define a new topic (without directly publishing)
				var topic = $.Topic("mailArrived");

				// when the deferred has been resolved, publish a
				// notification to subscribers
				dfd.done(topic.publish);

				// Here the Deferred is being resolved with a message
				// that will be passed back to subscribers. It's possible to
				// easily integrate this into a more complex routine
				// (eg. waiting on an ajax call to complete) so that
				// messages are only published once the task has actually
				// finished.
				dfd.resolve("it's been published!");
			}
			const exam10 = () => {
				//test 
				var callbacks = $.Callbacks();
				var prefix = "exam10:";
				callbacks.add(fn1);
				callbacks.add(fn2);
				callbacks.add(fn3);
				callbacks.disable();
				callbacks.fire('dim');
			}
			const exam = () => {
				//test 
				var callbacks = $.Callbacks();
				var prefix = "exam:";
			}
			//						exam1();
			//						exam2();
			//			exam3();
			//						exam4();
			//						exam5();
			//						exam6();
			//			exam7();
//			exam8();
//						exam9();
						exam10();
			//			exam11();
		</script>
	</body>

</html>